<template>
    <div class="homeindex-all">
        <div class="brand-div">
          <my-image class="my-img" :imgUrl="soursePath+storeInfo.icon"></my-image>
        </div>
        <!-- 公司简介 -->
        <div id="store-info" class="class_title"><span class="class-name">公司简介</span></div>
        <div class="store-info">
            <p class="store-name">{{storeInfo.message}}</p>
        </div>
        <!-- 门店一览 -->
        <div id="store-preview" class="class_title brand"><span class="class-name">门店一览</span></div>
        <div class="store-preview-section" v-html="htmlmsg">
        </div>
        <!-- 联系我们 -->
        <div id="store-contact" class="class_title"><span class="class-name">联系我们</span></div>
        <div class="contact-us">
            <p class="address">地址：{{storeInfo.address}}</p>
            <p class="phone">电话：{{storeInfo.phone}}</p>
        </div>
        <div class="nav">
          <div @click="scrollIntoView('store-info')" class="nav-item">公司简介</div>
          <div @click="scrollIntoView('store-preview')" class="nav-item">门店一览</div>
          <div @click="scrollIntoView('store-contact')" class="nav-item">联系我们</div>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";
import $ from "jquery";
import { Swipe, SwipeItem } from "mint-ui";
import Vue from "vue";
import "mint-ui/lib/swipe/style.css";
import "mint-ui/lib/swipe-item/style.css";
import myImage from "../lazyloadImg/lazyImage.vue";

Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);

export default {
  name: "store-info",
  data() {
    return {
      htmlmsg: ""
    };
  },
  mounted() {
    this.LoadDb();
    this.htmlmsg = this.unescapeHTML(this.storeInfo.htmlmsg);
  },
  components: { myImage },
  methods: {
    clickDetailsHandle(objs) {
      this.$router.push({ path: "details/" + objs.goodsid });
    },
    LoadDb() {},
    unescapeHTML: function(a) {
      a = "" + a;
      return a
        .replace(/&lt;/g, "<")
        .replace(/&gt;/g, ">")
        .replace(/&amp;/g, "&")
        .replace(/&quot;/g, '"')
        .replace(/&apos;/g, "'");
    },
    scrollIntoView(idName){
      $('body').animate({scrollTop: $("#" + idName).offset().top}, 500);
    }
  },
  computed: {
    ...mapState([
      "path",
      "soursePath",
      "icon",
      "storeid",
      "loadingShow",
      "phoneno",
      "storeInfo"
    ])
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import '../../common/css/mixin.styl';

.homeindex-all {
  font-family: 'Microsoft YaHei';
  padding-bottom: 0.36rem;

  .my-img {
    background-color: #f1f1f1;
    width: 100%;
    height: 100%;
  }

  .class_title {
    background-color: #ffb71c;
    height: 0.26rem;
    text-align center;

    .class-name {
      display inline-block;
      color: #fff;
      font-size: 0.12rem;
      line-height 0.26rem;
      position relative;
      top 1px;
      // letter-spacing: 0.01rem;
    }
  }

  .brand-div {
    width: 100%;
    height: 1.6rem;

    .my-img {
      background-color: #fff;
    }
  }

  .store-info {
    padding: 0.1rem 0.09rem 0.1rem 0.09rem;
    box-sizing: border-box;

    .store-name {
      text-indent: 0.2rem;
      font-size: 0.12rem;
      line-height: 0.22rem;
      color: #999;
    }
  }

  .store-preview-section {
    width: 100%;
    padding: 0.08rem 0.09rem;
    box-sizing: border-box;
    font-size: 0;

    img {
      width: 100%;
      height: auto;
      margin-bottom: 0.05rem;
    }
  }

  .contact-us {
    color: #333;
    font-size: 0.12rem;
    padding: 0.16rem 0.1rem 0.14rem 0.1rem;

    .address {
      text-align: center;
      line-height: 0.18rem;
    }

    .phone {
      margin-top: 0.06rem;
      text-align: center;
      line-height: 0.18rem;
    }
  }

  .nav {
    position: fixed;
    box-sizing: border-box;
    max-width: 750px;
    width: 100%;
    transform: translate3d(-50%, 0, 0);
    -webkit-transform: translate3d(-50, 0, 0);
    left: 50%;
    height: 0.36rem;
    padding: 0 0.1rem;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    box-shadow: 0 0 1px rgba(220, 220, 220, 1);

    .nav-item {
      text-align center;
      flex 1;
      font-size: 0.13rem;
      color: #333;
      letter-spacing: 0.01rem;
    }
  }
}
</style>
